<template>
  <div class="collection">

    <div>
      <tab :line-width="2" class="tabItem">
          <tab-item :selected="selected === index" v-for="(item, index) in listTab" :key="index" @on-item-click="selectTabEvery">{{item}}</tab-item>
      </tab>
    </div>
    <scroll style="overflow: hidden;" ref="scroll"
            :style="{height: scrollHeight}"
            :data="collectionList"
            :scrollbar="false"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingDown"
            @pullingUp="onPullingUp"
            v-if="selected === 0">
      <div>
        <div style="margin: 10px;overflow: hidden;" class="collectiondiv" v-for="item in collectionList" v-if="item.collectionType === 1" :key="item.index" @click="handleClickProductDesc(item.targetId,item.type)">
          <masker style="border-radius: 2px;" color="F9C90C" :opacity="0">
            <div class="m-img" :style="{backgroundImage:`url(${item.imgUrl})`}"></div>
            <div slot="content" class="m-title">
              <p>{{item.name}}{{item.title}}
              <br/>
              <span class="m-time">{{item.createAt.substring(0,10)}}</span>
              </p>
            </div>
          </masker>
          <div class="collTwo">
            <flexbox :gutter="0" class="orderflexbox">
              <flexbox-item>
                <div class="flex-demo-o">
                  <p class="nameWrapper">{{item.name}}</p>
                </div>
              </flexbox-item>
            </flexbox>
            <hr class="orderhrtwo">
            <flexbox :gutter="0" class="orderflexbox">
              <flexbox-item :span='5/6'>
                <div class="flex-demo-o">
                  <p class="collectiontext" @click.stop="goToMap(item.latitude, item.longitude, item.address)"><i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;{{item.address}}</p>
                </div>
              </flexbox-item>
              <flexbox-item :span='1/6'>
                <div class="flex-demo-or">
                  <i class="fa fa-star" aria-hidden="true" @click.stop="handleAlert(item.id, 0)"></i>
                </div>
              </flexbox-item>
            </flexbox>
          </div>
        </div>
        <not-data v-if="collectionList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getCollectionList(true)"></not-data>
    </div>
    </scroll>

    <!-- 我收藏的游记 -->
    <scroll :style="{height: travelScrollHeight}" ref="travelScroll" style="overflow: hidden;height: 100%"
            :data="travelList"
            :scrollbar="false"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingTravelDown"
            @pullingUp="onPullingTravelUp"
            v-if="selected === 1">
           <div>
               <div class="travelTabWrapper" v-for="item in travelList" :key="item.id" v-if="item.collectionType === 1" @click="handleGoTravelDesc(item.targetId)">
                    <div class="travelTabTop">
                        <div class="travelTabTopLeft">
                            <p>{{item.title}}</p>
                        </div>
                        <div class="travelTabTopRight">
                            <i class="fa fa-star" aria-hidden="true" @click.stop="handleAlert(item.id, 2)"></i>
                        </div>
                    </div>
                    <div class="travelInfo">
                        <div class="travelInfoLeft">
                            <div class="travelInfoLeftOne" @click.stop="handlePersonalInfo(item.userId)">
                                <img :src="item.headUrl" alt="" style="width:40px;height:40px;border-radius: 50%;">
                            </div>
                            <div class="travelInfoLeftTwo">
                                <p>{{item.nickname}}</p>
                            </div>
                        </div>
                        <div class="travelInfoRight">
                            <div class="travelInfoRightOne">
                                <p>{{item.browseCount}}浏览</p>
                            </div>
                            <div class="travelInfoRightTwo">
                                <p>{{item.commentCount ? item.commentCount : 0}}评论</p>
                            </div>
                        </div>
                    </div>
                    <div class="travelImageWrapper">
                      <div class="travelImage" :style="{backgroundImage:`url(${item.firstImg})`}">
                      </div>
                    </div>
                </div>
                <not-data v-if="travelList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetTravel(true)"></not-data>
             </div>
    </scroll>

     <!--我收藏的攻略的模块 -->
    <scroll :style="{height: strategyScrollHeight}" ref="strategyScroll" style="overflow: hidden;height: 100%"
            :data="strategyList"
            :scrollbar="false"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingStrategyDown"
            @pullingUp="onPullingStrategyUp"
            v-if="selected === 2">
          <div>
              <div class="strategyWrapper" v-for="item in strategyList" :key="item.id" v-if="item.collectionType === 1" @click="handleGoTravelDesc(item.targetId)">
                    <div class="imgWrapper" :style="{backgroundImage:`url(${item.firstImg})`}">
                    </div>
                    <div class="textWrapper">
                        <p>{{item.title}}</p>
                    </div>
                    <div class="positionWrapper">
                      <div class="positionWrapperLeft">
                        <p>{{item.addressName}}</p>
                      </div>
                      <div class="positionWrapperRight">
                        <i class="fa fa-star" aria-hidden="true" @click.stop="handleAlert(item.id, 3)"></i>
                      </div>
                    </div>
                    <div class="bottomStrategy">
                        <div class="countWrapper">
                            <p>{{item.browseCount}}次浏览</p>
                        </div>
                        <div class="timeWrapper">
                            <p>{{item.publishTime}}</p>
                        </div>
                    </div>
              </div>
              <not-data v-if="strategyList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetStrategy(true)"></not-data>
            </div>
    </scroll>

    <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="showCancel" @on-click-menu="handleClickMenu"></actionsheet>
      <div class="alertWrapper">
          <div>
            <confirm v-model="showGaoDei"
            title="操作提示"
            @on-cancel="onCancelGaoDei"
            @on-confirm="onConfirmGaoDei">
                <p style="text-align:center;">您尚未安装常用地图，小嗨为您推荐安装高德地图</p>
            </confirm>
        </div>
      </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { isIOS, isIphoneX } from '@/assets/js/brower'
import { mapGetters, mapMutations } from 'vuex'
import notData from '@/components/not-data/not-data'
import dingImage from '@/assets/img/ding.png'
import { Masker, Flexbox, FlexboxItem, Rater, Confirm, Actionsheet, Tab, TabItem } from 'vux'
import axios from '@/api/axiosApi'
import Scroll from '@/components/scroll/scroll'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX } from '@/api/config'

export default {
  data () {
    return {
      dingImage: dingImage,
      collectionList: [],
      user: {},
      collectionId: '',
      // 跳转地图
      showMap: false,
      menusMap: {},
      showGaoDei: false,
      // 经度纬度
      latitude: '',
      longitude: '',
      address: '',
      showCancel: true,
      listTab: [this.$t('tab.scenicOrHotel'), this.$t('tab.travels'), this.$t('tab.strategy')],
      travelList: [],
      strategyList: [],
      scrollHeight: '500px',
      travelScrollHeight: '500px',
      strategyScrollHeight: '500px',
      collectionType: 0
    }
  },
  computed: {
    ...mapGetters({
      selected: 'collectionTab'
    })
  },
  methods: {
    ...mapMutations({
      setCollectionTab: 'SET_COLLECTION_TAB'
    }),
    handleClickProductDesc (id, type) {
      this.$router.push('/cart/product/' + id + '/' + type)
    },
    // 获取收藏列表
    getCollectionList (isFirst) {
      const userId = localUser.get('id')
      axios.get(this, '/v1/collection/' + userId + '/0', {pageNum: this.pageNum, pageSize: this.pageSize}, (data) => {
        data.forEach(item => {
          const tmp = item.atlas.split(';')[0]
          if (tmp) {
            item.imgUrl = tmp.indexOf(QINIU_PREFIX) > -1 ? tmp + '-meitu1' : tmp
          }
        })
        if (isFirst) {
          this.collectionList = data
          return
        }
        if (data.length === 0) {
          if (this.pageNum === 1) {
            this.$refs.scroll.hiddenPullDown()
          } else {
            this.pageNum--
            this.$refs.scroll.hiddenPullUpLoad()
          }
        } else {
          if (this.pageNum > 1) {
            this.collectionList = this.collectionList.concat(data)
          } else {
            this.collectionList = data
          }
        }
      })
    },
    handleAlert (id, type) {
      const _self = this
      this.$vux.confirm.show({
        title: '温馨提示',
        content: '您确定要取消收藏吗',
        onConfirm () {
          axios.put(_self, '/v1/messageRecord', {id: id, collectionType: 0}, (data) => {
            _self.$vux.toast.text('取消收藏成功', 'middle')
            if (type === 0) {
              _self.collectionList.forEach(item => {
                if (item.id === id) {
                  item.collectionType = 0
                }
              })
            } else if (type === 2) {
              _self.travelList.forEach(item => {
                if (item.id === id) {
                  item.collectionType = 0
                }
              })
            } else if (type === 3) {
              _self.strategyList.forEach(item => {
                if (item.id === id) {
                  item.collectionType = 0
                }
              })
            }
          })
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getCollectionList()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getCollectionList()
    },
    onPullingTravelUp () {
      this.travelPageNum++
      this.handleGetTravel()
    },
    onPullingTravelDown () {
      this.travelPageNum = 1
      this.handleGetTravel()
    },
    onPullingStrategyDown () {
      this.strategyPageNum = 1
      this.handleGetStrategy()
    },
    onPullingStrategyUp () {
      this.strategyPageNum++
      this.handleGetStrategy()
    },
    // 高德地图
    goToMap (latitude, longitude, address) {
      if (isIOS()) {
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': latitude, 'longitude': longitude})
      } else {
        // android
        this.menusMap = JSON.parse(window.android.isInstallByread())
        if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
          this.showCancel = false
          this.showGaoDei = true
          return
        }
        if (this.menusMap.baiDu === '2') {
          this.menusMap.baiDu = '百度地图'
        }
        if (this.menusMap.gaoDei === '1') {
          this.menusMap.gaoDei = '高德地图'
        }
        if (this.menusMap.tenXun === '3') {
          this.menusMap.tenXun = '腾讯地图'
        }
        this.showMap = true
        this.latitude = latitude
        this.longitude = longitude
        this.address = address
      }
    },
    // 点击菜单跳转
    handleClickMenu (value) {
      if (value === 'baiDu') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 2, 1, '')
      } else if (value === 'gaoDei') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 1, 1, '')
      } else if (value === 'tenXun') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 3, 1, '')
      }
    },
    // 确认弹框友好提示
    onCancelGaoDei () {
    },
    onConfirmGaoDei () {
      window.android.makeUpMap(this.latitude, this.longitude, this.address, 0, 1, '')
    },
    selectTabEvery (value) {
      if (value === 0) {
        setTimeout(() => {
          this.$refs.scroll.scrollTo(0, 0)
        }, 80)
      } else if (value === 1) {
        setTimeout(() => {
          this.$refs.travelScroll.scrollTo(0, 0)
        }, 80)
      } else if (value === 2) {
        setTimeout(() => {
          this.$refs.strategyScroll.scrollTo(0, 0)
        }, 80)
      }
      this.setCollectionTab(value)
    },
    // 获取攻略和游记接口 0是游记，1是攻略，articleType
    handleGetTravel (isFirst) {
      axios.get(this, '/v1/collection/' + localUser.get('id') + '/2', {pageNum: this.travelPageNum, pageSize: this.travelPageSize}, (data) => {
        if (isFirst) {
          this.travelList = data
          return
        }
        if (data.length === 0) {
          // this.$vux.toast.text('没有更多数据了', 'middle')
          if (this.travelPageNum === 1) {
            this.$refs.travelScroll.hiddenPullDown()
          } else {
            this.travelPageNum--
            this.$refs.travelScroll.hiddenPullUpLoad()
          }
        } else {
          if (this.travelPageNum > 1) {
            this.travelList = this.travelList.concat(data)
          } else {
            this.travelList = data
          }
        }
      })
    },
    handleGetStrategy (isFirst) {
      axios.get(this, '/v1/collection/' + localUser.get('id') + '/3', {pageNum: this.strategyPageNum, pageSize: this.strategyPageSize}, (data) => {
        if (isFirst) {
          this.strategyList = data
          return
        }
        if (data.length === 0) {
          // this.$vux.toast.text('没有更多数据了', 'middle')
          if (this.strategyPageNum === 1 && this.$refs.strategyScroll) {
            this.$refs.strategyScroll.hiddenPullDown()
          } else {
            this.strategyPageNum--
            if (this.$refs.strategyScroll) this.$refs.strategyScroll.hiddenPullUpLoad()
          }
        } else {
          if (this.strategyPageNum > 1) {
            this.strategyList = this.strategyList.concat(data)
          } else {
            this.strategyList = data
          }
        }
      })
    },
    handleGoTravelDesc (id) {
      this.$router.push('/address/playStrategy/' + id)
    },
    handlePersonalInfo (userId) {
      this.$router.push('/user/archives/' + userId)
    }
  },
  components: {
    VHeader,
    Masker,
    Flexbox,
    FlexboxItem,
    Scroll,
    Rater,
    Confirm,
    isIOS,
    isIphoneX,
    Actionsheet,
    Tab,
    TabItem,
    notData
  },
  created () {
    this.pageNum = 1
    this.pageSize = 10
    this.travelPageNum = 1
    this.travelPageSize = 10
    this.strategyPageNum = 1
    this.strategyPageSize = 10
    this.paddingTop = 24
    if (isIphoneX()) {
      this.paddingTop = 34
    }
    this.scrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'
    this.travelScrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'
    this.strategyScrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'

    this.getCollectionList(true)
    // 获取游记
    this.handleGetTravel(true)
    // 获取攻略
    this.handleGetStrategy(true)
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl';

.collection {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  overflow: hidden;
}

.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  background-position 50% 50%
  cursor: pointer;
  border-radius: 2px;
}

.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.m-title p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
}

.collTwo {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}

.flex-demo-o {
  margin-left: 10px;
}

.collectiondiv {
  margin-top: 20px;
  box-shadow: 0px 0px 15px #C5C5C5;
}

.orderhrtwo {
  height: 1px;
  border: none;
  border-top: 1px dashed #C5C5C5;
  margin-top: 3px;
}

.flex-demo-or {
  text-align: right;
  margin-right: 20px;
}

.collectiontext {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

.nameWrapper {
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}



.travelTabWrapper {
    margin-bottom 10px
    box-shadow: 0px 0px 15px #C5C5C5;
    background-color white
    &:last-child {
        margin-bottom: 0
    }
    .travelTabTop {
        padding-top 15px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
        display: flex
        justify-content space-between
        .travelTabTopLeft {
            p {
                font-size $font-size-title
                font-weight bold
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
        }
        .travelTabTopRight {
            margin-top 4px
            display flex
            img {
                margin-top -4px
            }
        }
    }
    .travelInfo {
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        display flex
        justify-content space-between
        border-bottom-style solid
        border-width:1px
        border-color: #E4E4E4
        .travelInfoLeft {
            display flex
            .travelInfoLeftOne {

            }
            .travelInfoLeftTwo {
                p {
                    font-size $font-size-small
                    margin-left 10px
                    margin-top 10px
                }
            }
        }
        .travelInfoRight {
            display flex
            .travelInfoRightOne {
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
            .travelInfoRightTwo {
                margin-left: 10px
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
        }
    }
    .travelImageWrapper {
          padding-top 10px
          padding-left 15px
          padding-right 15px
          padding-bottom 10px
        .travelImage {
          width: 100%
          height 200px
          background-size: cover
          background-repeat: no-repeat
          background-position 50% 50%
        }
    }
  }

  .strategyWrapper {
      margin-bottom: 10px
      background-color: white
      padding-top 15px
      padding-left 15px
      padding-right 15px
      padding-bottom 10px
      box-shadow: 0px 0px 15px #C5C5C5
      &:last-child {
        margin-bottom: 0
      }
      .imgWrapper {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
      .textWrapper {
          margin-top 5px
          font-weight bold
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
      }
      .positionWrapper {
        display flex
        justify-content space-between
        .positionWrapperLeft {
          p {
            font-size: $font-size-desc
          }
        }
        .positionWrapperRight {
          width 20px
        }
      }
      .bottomStrategy {
          display flex
          justify-content: space-between
          .countWrapper {
              p {
                font-size: $font-size-small
              }
          }
          .timeWrapper {
              p {
                font-size: $font-size-small
              }
          }
      }
  }
</style>
